<!-- 预览图片 -->
<script setup lang="ts">
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
import Rotate from '@iconify-icons/carbon/rotate-clockwise-alt'
import ZoomOut from '@iconify-icons/ep/zoom-out'
import ZoomIn from '@iconify-icons/ri/zoom-in-line'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  /** 文件名 */
  fileName: string
  /** 链接地址 */
  filePath: string
  /** 渲染成功 */
  renderedHandler: () => void
  /** 渲染失败 */
  errorHandler: () => void
}>()

async function renderImage() {
  const el = document.getElementById('previewImg')
  el.onload = () => {
    dragTop.value =
      (document.getElementById('previewContainer').offsetHeight -
        document.getElementById('previewImg').offsetHeight) /
      2
    dragLeft.value =
      (document.getElementById('previewContainer').offsetWidth -
        document.getElementById('previewImg').offsetWidth) /
      2
    props.renderedHandler()
  }
  el.setAttribute('src', props.filePath)
}

const scaleSize = ref(1)
function zoomIn() {
  scaleSize.value += 0.2
}
function zoomOut() {
  if (scaleSize.value <= 0.3) {
    return
  }
  scaleSize.value -= 0.2
}

const rotateDeg = ref(0)
function rotate() {
  rotateDeg.value += 90
}

const dragLeft = ref(0)
const dragTop = ref(0)

function onDragImage(e) {
  const oImg = e.target
  const disX = e.clientX - oImg.offsetLeft
  const disY = e.clientY - oImg.offsetTop
  document.onmousemove = (e) => {
    e.preventDefault()
    const left = e.clientX - disX
    const top = e.clientY - disY
    dragLeft.value = left
    dragTop.value = top
  }
  document.onmouseup = () => {
    document.onmousemove = null
    document.onmouseup = null
  }
}

onUnmounted(() => {
  scaleSize.value = 1
  rotateDeg.value = 0
  dragLeft.value = 0
  dragTop.value = 0
})

onMounted(() => {
  renderImage()
  document.getElementById('previewContainer').addEventListener('wheel', (e) => {
    e.preventDefault()
    if (e.deltaY < 0) {
      // 向上滚动
      zoomIn()
    } else if (e.deltaY > 0) {
      // 向下滚动
      zoomOut()
    }
  })
})
</script>
<template>
  <div class="relative h-full w-full">
    <div class="absolute top-1 right-1 z-10">
      <button
        type="button"
        class="el-button is-circle"
        :icon="useRenderIcon(ZoomIn)"
        title="放大"
        circle
        @click.prevent="zoomIn"
      >
        <i class="el-icon"
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            aria-hidden="true"
            role="img"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            style="outline: none"
          >
            <path
              fill="currentColor"
              d="m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7c-3.868 0-7 3.132-7 7c0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15zM10 10V7h2v3h3v2h-3v3h-2v-3H7v-2h3z"
            /></svg
        ></i>
      </button>
      <button
        type="button"
        :icon="useRenderIcon(ZoomOut)"
        title="缩小"
        class="el-button is-circle"
        circle
        @click.prevent="zoomOut"
      >
        <i class="el-icon"
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            aria-hidden="true"
            role="img"
            width="1em"
            height="1em"
            viewBox="0 0 1024 1024"
            style="outline: none"
          >
            <path
              fill="currentColor"
              d="m795.904 750.72l124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704a352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
            /></svg
        ></i>
      </button>
      <button
        type="button"
        class="el-button is-circle"
        :icon="useRenderIcon(Rotate)"
        title="旋转"
        circle
        @click.prevent="rotate"
      >
        <i class="el-icon"
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            aria-hidden="true"
            role="img"
            width="1em"
            height="1em"
            viewBox="0 0 32 32"
            style="outline: none"
          >
            <path
              fill="currentColor"
              d="M16 30H4a2.002 2.002 0 0 1-2-2V16a2.002 2.002 0 0 1 2-2h12a2.002 2.002 0 0 1 2 2v12a2.002 2.002 0 0 1-2 2zM4 16v12h12.001L16 16zm26-1l-1.41-1.41L26 16.17V11a7.008 7.008 0 0 0-7-7h-5v2h5a5.006 5.006 0 0 1 5 5v5.17l-2.59-2.58L20 15l5 5z"
            /></svg
        ></i>
      </button>
    </div>
    <div
      id="previewContainer"
      class="h-full flex justify-center items-center overflow-hidden relative"
    >
      <img
        id="previewImg"
        :draggable="false"
        :style="`transform:rotate(${rotateDeg}deg) scale(${scaleSize}); left:${dragLeft}px; top:${dragTop}px`"
        class="cursor-grab absolute"
        @mousedown="onDragImage"
      />
    </div>
  </div>
</template>

<style scoped>
:deep(.x-spreadsheet-sheet, .x-spreadsheet-overlayer, .x-spreadsheet-overlayer-content) {
  width: 100% !important;
}
</style>
